<template>
    <div>
        <a-form :form="form" @submit="onSubmit">
            <p class="form-note">注：登录账号提交后不可变更</p>
            <a-row :gutter="0">
                <a-col :key="1" :span="12">
                    <a-form-item label="服务号名称" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-input placeholder="服务号名称" v-decorator="[
                                'name',
                                {
                                    rules: [{ required: true, message: '请输入服务号名称' }]
                                }
                            ]"/>
                    </a-form-item>
                </a-col>
                <a-col :key="2" :span="12">
                    <a-form-item label="等级" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-input-number placeholder="等级" :style="{width: '184px'}" :min='1' :max="99" v-decorator="[
                                'level',
                                {
                                    rules: [{required: true, message: '请输入等级'}]
                                }
                            ]"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :key="3" :span="12">
                    <a-form-item label="登录账号" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-input placeholder="登录账号" AUTOCOMPLETE="off" @focus="()=>this.readonly=false"
                                 :read-only="readonly" v-if="!serviceData.username" v-decorator="[
                                'username',
                                {
                                    rules: [{
                                        required: true, message: '请输入登录账号'
                                    }, {
                                        pattern: /^\w+$/, message: '账号由数字、字母、下划线组成'
                                    }],
                                    validateTrigger: 'blur',
                                }
                            ]"/>
                        <p v-else>{{serviceData.username}}</p>
                    </a-form-item>
                </a-col>
                <a-col :key="4" :span="12">
                    <a-form-item label="账号名称" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-input placeholder="账号名称" v-decorator="[
                                'account',
                                {
                                    rules: [{ required: true, message: '请输入账号名称' }]
                                }
                            ]"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :key="5" :span="24">
                    <a-form-item label="对应销售" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                        <a-select v-decorator="['sale_id',{rules: [{ required: true, message: '请选择对应销售' }]}]"
                                  placeholder="对应销售">
                            <a-select-option v-for="v in sales" :key="v.id" :value="v.id">
                                {{v.realname}}({{v.username}})
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :key="6" :span="24">
                    <a-form-item label="对应调度" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                        <a-select v-decorator="[
                                'dispatch_id',
                                {
                                    rules: [{ required: true, message: '选择对应调度' }]
                                }
                            ]" placeholder="请选择对应调度">
                            <a-select-option v-for="v in dispatchs" :key="v.id" :value="v.id">
                                {{v.realname}}({{v.username}})
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :key="7" :span="24">
                    <a-form-item label="对应财务" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                        <a-select v-decorator="[
                                'finance_id',
                                {
                                    rules: [{ required: true, message: '选择对应财务' }]
                                }
                                ]" placeholder="请选择对应财务">
                            <a-select-option v-for="v in finances" :key="v.id" :value="v.id">
                                {{v.realname}}({{v.username}})
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :key="8" :span="12">
                    <a-form-item label="联系人" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-input placeholder="联系人" v-if="!serviceData.contact" v-decorator="[
                                'contact',
                                {
                                    rules: [{ required: true, message: '请输入联系人' }]
                                }
                            ]"/>
                        <p v-else>{{serviceData.contact}}</p>
                    </a-form-item>
                </a-col>
                <a-col :key="9" :span="12">
                    <a-form-item label="手机号" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                        <a-input placeholder="手机号" v-if="!serviceData.mobile" v-decorator="[
                                'mobile',
                                {
                                    rules: [{
                                        required: true, message: '请输入手机号',
                                    }, {
                                        pattern: /^[1][3456789][0-9]{9}$/, message: '手机号码格式不对'
                                    }],
                                    validateTrigger: 'blur',
                                }
                            ]"/>
                        <p v-else>{{serviceData.mobile}}</p>
                    </a-form-item>
                </a-col>
                <a-col :key="10" :span="24">
                    <a-form-item label="地址" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span:20} }">
                        <a-input placeholder="地址" v-decorator="[
                                'address',
                                {
                                    rules: [{ required: true, message: '请输入地址' }]
                                }
                            ]"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :key="11" :span="12">
                    <a-form-item label="密码" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }" v-if="!serviceData.password">
                        <a-input type="password" AUTOCOMPLETE="off" @focus="()=>this.readonly=false" :read-only="readonly"
                                 placeholder="密码" v-decorator="[
                                'password',
                                {
                                    rules: [{
                                        required: true, message: '请输入密码'
                                    }, {
                                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z!@#$%^&*]{6,20}$/, message: '密码由6-20位数字、字母、符号 (!@#$%^&*()) 组成，最少包含一个字母、一个数字'
                                    }],
                                    validateTrigger: 'blur',
                                }
                            ]"/>
                    </a-form-item>
                </a-col>
                <a-col :key="12" :span="12">
                    <a-form-item label="重输密码" :labelCol="{lg: {span: 8}, sm: {span: 8}}"
                                 :wrapperCol="{lg: {span: 16}, sm: {span: 16} }" v-if="!serviceData.password_rep">
                        <a-input type="password" AUTOCOMPLETE="off" @focus="()=>this.readonly=false" :read-only="readonly"
                                 placeholder="重输密码" v-decorator="[
                                'password_rep',
                                {
                                    rules: [{
                                        required: true, message: '请重输密码'
                                    },{
                                        validator: compareToFirstPassword
                                    }]
                                }
                            ]"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="0">
                <a-col :key="13" :span="24">
                    <a-form-item label="备注" :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                 :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                        <a-textarea placeholder="请输入备注" v-decorator="['remark', {
                                rules: [{
                                    max: 70, message: '字数不超过70'
                                }]
                            }]" maxLength="70" :rows="3"/>
                    </a-form-item>
                </a-col>
                <a-col :key="14" :span="24">
                    <transition name="slide-fade">
                        <p class="account-tips" v-if="errorShow">{{error}}</p>
                    </transition>
                </a-col>
            </a-row>
        </a-form>
        <p>已有MMC账号，<a href="#" @click.prevent="toLogin">去使用</a></p>
        <a-modal
                v-model='useRegistered'
                title='登录'
                width="450px"
                centered
                @cancel="() => {loginForm.resetFields(); form.resetFields()}"
                :keyboard='false'
                :maskClosable='false'
        >
            <a-form :form="loginForm">
                <a-form-item label="账号" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    <a-input
                            v-decorator="[
                            'center_username',
                            {rules: [{ required: true, message: '请输入账号！' }]}
                        ]"
                            @focus="()=>this.readonly=false" :read-only="readonly" placeholder="请输入账号"/>
                </a-form-item>
                <a-form-item label="密码" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    <a-input
                            v-decorator="[
                            'center_password',
                            {rules: [{ required: true, message: '请输入密码！' }]}
                        ]" @focus="()=>this.readonly=false" :read-only="readonly" type="password" placeholder="请输入密码"/>
                </a-form-item>
                <transition name="slide-fade">
                    <p class="tips" v-if="errorShow">{{errMsg}}</p>
                </transition>
            </a-form>
            <template slot="footer">
                <a-button @click="checkUser" type="primary">下一步</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
    import {mapActions, mapGetters} from 'vuex'

    export default {
        data() {
            return {
                deps: [],
                roles: [],
                dispatchs: [],
                sales: [],
                finances: [],
                form: this.$form.createForm(this),
                loginForm: this.$form.createForm(this),
                useRegistered: false,
                readonly: true,
                errorShow: false,
                errMsg: '',
                openid: '',
                token: '',
                labelCol: {lg: {span: 7}, sm: {span: 7}},
                wrapperCol: {lg: {span: 10}, sm: {span: 17}}
            }
        },
        mounted() {
            this.http("get", "user/service").then(
                res => {
                    this.dispatchs = res.dispatchs
                    this.sales = res.sales
                    this.finances = res.finances
                }
            );
        },
        computed: {
            ...mapGetters([
                'serviceData'
            ])
        },
        methods: {
            onSubmit() {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values.token = this.token
                        values.openid = this.openid
                        values.realname = values.contact
                        if (values.password !== values.password_rep) {
                            this.$message.error('两次密码不一致', 1);
                            return false
                        }
                        this.http('post', 'service/create', Object.assign(values, this.serviceData)).then(res => {
                            if (res.status == 200) {
                                this.$message.success(res.msg, 1);
                                this.$emit('getList')
                                this.$emit('hideCreate')
                                this.form.resetFields()
                                this.storeServiceInfo({})
                            } else {
                                this.errorShow = true
                                this.error = res.msg
                                setTimeout(() => {
                                    this.errorShow = false
                                }, 3000)
                            }
                        })
                    }
                })
            },
            compareToFirstPassword(rule, value, callback) {
                if (value && value !== this.form.getFieldValue('password')) {
                    callback('两次输入密码不一致！');
                } else {
                    callback();
                }
            },
            async toLogin() {
                await this.$emit('toRegisteredStep', false)
                await this.$nextTick(() => {this.useRegistered = true})
            },
            checkUser(e) {
                e.preventDefault();

                this.loginForm.validateFields(async (err, values) => {
                    if (!err) {
                        await this.http('post', 'service/usercenter-login', {
                            username: values.center_username,
                            password: values.center_password
                        }).then(async res => {
                            if (parseInt(res.code) === 0) {
                                this.openid = res.data.openid
                                this.token = res.token
                                this.loginForm.resetFields()

                                let filledData = {
                                    username: values.center_username,
                                    password: values.center_password,
                                    password_rep: values.center_password,
                                    mobile: res.data.phone,
                                    contact: res.data.name,
                                }
                                this.storeServiceInfo(filledData)
                                await this.form.setFieldsValue(filledData)
                                this.useRegistered = false
                                await this.$nextTick(() => {this.$emit('toRegisteredStep', true)})
                            } else {
                                this.errorShow = true
                                this.errMsg = res.msg
                                setTimeout(() => {
                                    this.errorShow = false
                                }, 3000)
                            }
                        })
                    }
                })
            },
            ...mapActions([
                'storeServiceInfo'
            ])
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";

    .tips, .account-tips {
        position: absolute;
        @include sc(14px, #f5222d);
    }

    .tips {
        margin-left: 70px;
        margin-top: -10px;
    }

    .account-tips {
        margin-left: 90px;
        margin-top: -22px;
    }

    .slide-fade-enter-active {
        transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .slide-fade-leave-active {
        transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateY(-5px);
        opacity: 0;
    }

    .slide-fade-leave-to {
        transform: translateY(5px);
        opacity: 0;
    }
</style>
